<template>
	<!-- 余额页 -->
	<view class="balance wap">
		<view class="row bg mt30 con">
			<view class="col_16">
				<view class="coltext">余额</view>
				<view class="balance">{{userNums.Balance}}</view>
			</view>
			<view class="col_8">
				<view class="numtext" @click="nav_to('/pages/user/balance_list')">余额明细</view>
				<view class="num size c2">累计充值3次</view>
			</view>
		</view>

		<!-- <view class="title f1 c1 mt30">
			余额充值
		</view> -->

		<view class="bg inputbox mt30">
			<view class="fuhao">¥</view>
			<input type="digit" placeholder-class="placeholderStyle" placeholder="输入你要充值的金额" v-model="priceStr">
		</view>


		<view class="num_list">
			<view class="item bg" :class="{'curr':item == currIndex}" @click="setCurrIndex(item)" v-for="(item,index) in list" :key="index">
				<view class="num">{{item}}</view>
			</view>
		</view>

		<view class="btn mt40" @click="sub">立即充值</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userNums: {},
				currIndex: 0,
				price: 0,
				priceStr: "",
				list: [3000, 5000, 1000]
			}
		},
		methods: {
			setCurrIndex(item) {
				this.currIndex = item;
				this.price = this.item;
				this.priceStr = item
			},
			async getSaleChannelDetail() {
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail', { CompanyID: 6002 });
				this.userNums = res.data;
			},
			async sub() {
				let _this = this;
				if (this.price == 0) {
					this.$pv.msg('请选择金额');
					return false;
				}
				this.$pv.load();

				let pres = await this.$api.post('/Payment/Pay', {
					CompanyID: 6002,
					total_fee: this.price,
					EventType: '会员充值',
					body: '会员充值',
					SourcePage:'balance',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				})
				let payObj = JSON.parse(pres.data);


				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async function(res) {
						_this.$pv.msg('支付成功');
						_this.nav_back(2000);
					},
					fail: function(err) {
						_this.$pv.msg('支付失败');
					}
				});
			}
		},
		watch: {
			priceStr(newVal) {
				this.price = parseFloat(newVal)
			}
		},
		onShow() {
			this.getSaleChannelDetail();

			this.$api.post('/Common/Add_ViewPath', { Path: 'balance' ,Platform:uni.getStorageSync('platform')});
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
.size{
	font-size: 24rpx;
}
	.bg {
		background: #fff;
		border-radius: 16rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.fs64 {
		font-size: 64rpx;
		line-height: 64rpx;
	}

	.lh64 {
		line-height: 64rpx;
	}

	.col_16 {
		padding-left: 32rpx;
		box-sizing: border-box;
		.coltext{
			font-size: 24rpx;
			color: #999999;
		}
		.balance{
			font-size: 76rpx;
			color: #333333;
			font-weight: 600;
		}
	}

	.con {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.col_8 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 30rpx;
		box-sizing: border-box;
		.numtext{
			font-size: 24rpx;
			color: #999999;
			margin-left: 78rpx;
		}
		.link,
		.num {
			text-align: right;
		}
	}

	.num_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			margin-top: 30rpx;
			width: 206rpx;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.num {
				font-size: 40rpx;
			}
		}

		&::after {
			content: "";
			display: block;
			width: 206rpx;
			height: 1;
		}

		.curr {
			background: #0D0D0D;
			box-shadow: 0px 4px 6px 0px rgba(106, 84, 53, 0.4);

			.num {
				color: #fff;
			}
		}
	}

	.inputbox {
		height: 92rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		.fuhao{
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}
		input {
			flex: 1;
			height: 92rpx;
			padding-left: 10rpx;
		}
	}
	.placeholderStyle{
		font-size: 28rpx;
		color: #999999;
		font-weight: 500;
	}
</style>